<template>
  <view class="fu-page" :style="{ position: sticky ? 'sticky' : 'initial', top: top + 'rpx', 'z-index': zIndex }">
    <scroll-view class="fu-tab" scroll-x :scroll-left="moveX" :scroll-with-animation="animation" :style="{ height: height + 'rpx', 'line-height': height + 'rpx' }">
      <view class="" style="position: relative;">
        <view
          class="fu-tab-item"
          :class="[active == index ? 'active' : '', 'item-active-' + index]"
          :style="{ color: active == index ? activeColor : inactiveColor, 'font-size': size + 'rpx' }"
          v-for="(item, index) in tabs"
          :key="index"
          @click="tabChange($event, item[nodeKey], index)"
        >
          {{ item[nodeTitle] }}
        </view>
        <view
          class="fu-tab-line"
          :style="{ width: getWidth + 'rpx', left: left, height: lineHeight + 'rpx', background: lineColor, transition: animation, bottom: bottom + 'rpx' }"
        ></view>
      </view>
      
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    //底部条线宽
    'line-width': {
      type: [Number, String],
      default: 40
    },
    //底部条高度
    'line-height': {
      type: [Number, String],
      default: 4
    },
    //底部调颜色
    'line-color': {
      type: String,
      default: '#f02523'
    },
    //底部条位置
    bottom: {
      type: [Number, String],
      default: 4
    },
    // tab高度
    height: {
      type: [Number, String],
      default: 96
    },
    //字体大小
    size: {
      type: [Number, String],
      default: 32
    },
    //选中状态
    'active-color': {
      type: String,
      default: '#f02523'
    },
    // 默认状态
    'inactive-color': {
      type: String,
      default: '#5f5f5f'
    },
    //数据
    tabs: {
      type: [Object, Array]
    },
    //动画
    animation: {
      type: String,
      default: 'all .3s ease'
    },
    // 标签名称
    'node-title': {
      type: String,
      default: 'name'
    },
    // 需要返回的唯一标识
    'node-key': {
      type: String,
      default: 'id'
    },
    // 是否使用粘性布局
    sticky: {
      type: Boolean,
      default: false
    },
    // 粘性布局离顶部高度
    top: {
      type: [String, Number],
      default: 100
    },
    'z-index': {
      type: [String, Number],
      default: 99
    }
  },
  data() {
    return {
      active: 0,
      left: 0,
      getWidth: 40,
      lineWidthArray: [],
      parentWidth: 0,
      moveX: 0
    };
  },
  computed: {},
  mounted() {
    let _this = this;
    let windowWidth = uni.getSystemInfoSync().windowWidth;
    // 底部条宽度是否超过了标签最小宽度
    let lineWidthArray = [];
    if (this.isArray(this.tabs)) {
      this.tabs.forEach((val, i) => {
        let activeItem = `item-active-${i}`;
        let obj = uni
          .createSelectorQuery()
          .in(this)
          .select(`.${activeItem}`);
        obj
          .boundingClientRect(function(data) {
            lineWidthArray.push(Math.floor((data.width * 750) / windowWidth));
          })
          .exec();
      });
      this.lineWidthArray = lineWidthArray;
      this.parentWidth = lineWidthArray.reduce(function(total, curr) {
        return total + curr;
      }, 0);
      if (_this.lineWidth > Math.min(...lineWidthArray)) {
        _this.getWidth = Math.min(...lineWidthArray);
      } else {
        _this.getWidth = _this.lineWidth;
      }
    }
    //计算底部显示条初始位置

    this.$nextTick(function() {
      let activeItem = `item-active-${this.active}`;
      let obj = uni
        .createSelectorQuery()
        .in(this)
        .select(`.${activeItem}`);
      obj
        .boundingClientRect(function(data) {
          let targetWidth = Math.floor((data.width * 750) / windowWidth);
          _this.left = Math.floor(targetWidth / 2 - _this.getWidth / 2) + 'rpx';
        })
        .exec();
    });
  },
  methods: {
    tabChange(e, id, index) {
      let _this = this;
      let windowWidth = uni.getSystemInfoSync().windowWidth;
      let activeItem = `item-active-${index}`;
      this.active = index;
      //事件源离左边距离
      let offsetLeft = (e.target.offsetLeft * 750) / windowWidth;
      //事件源宽度
      let targetWidth = this.lineWidthArray[index];
      // 底部显示条需要位移到的位置
      this.$nextTick(function() {
        let lineOffsetLeft = Math.ceil(offsetLeft + (targetWidth / 2 - this.getWidth / 2));
        this.left = lineOffsetLeft + 'rpx';
      });
      // 获取父级宽度
      let objParent = uni
        .createSelectorQuery()
        .in(this)
        .select('.fu-tab');
      let parentWidth;

      objParent
        .boundingClientRect(function(data) {
          parentWidth = (data.width * 750) / windowWidth;
          let moveX = Math.ceil(offsetLeft - (parentWidth - targetWidth) / 2);
          // 转为px  scoll-view接受的值为px
          _this.moveX = (moveX * windowWidth) / 750;
        })
        .exec();
      let data = {};
      data.index = index;
      data[this.nodeKey] = id;
      this.$emit('change', data);
    },
    isArray(obj) {
      return Object.prototype.toString.call(obj) === '[object Array]';
    }
  }
};
</script>

<style scoped lang="scss">
.fu-page {
  background: #ffffff;
}
.fu-tab {
  height: 96rpx;
  line-height: 96rpx;
  // overflow-x: scroll;
  // overflow-y: hidden;
  font-size: 32rpx;
  color: #5f5f5f;
  white-space: nowrap;
  // position: relative;
  background: #ffffff;
  transition: all 0.3s ease;
  .fu-tab-item {
    padding: 0 30rpx;
    display: inline-block;

    &.active {
      color: #f02523;
    }
  }
  .fu-tab-line {
    position: absolute;
    bottom: 4rpx;
    left: 0;
    width: 40rpx;
    background: #f02523;
    height: 4rpx;
    border-radius: 2rpx;
    transition: all 0.3s ease;
  }
}
</style>
